import React, { Component } from 'react';
import './../lastupload.scss';
class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  componentDidMount () {
    let f_type = '本周最受欢迎';
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }

  goUsers (uname) {
    this.props.history.push('/users/'+ uname)
    localStorage.setItem('u_name', JSON.stringify(uname))
  }

  render () {
    const dat = this.state.dat
    let pop = [];
    for (let i in dat ) {
      if (i<6) {
       console.log(dat[i])
       let fid = dat[i].f_id  // 获取食物id
       let uname = dat[i].u_name
        pop.push(
          <li  key={dat[i].f_id}>
            <div className="allupdate-containerImg" onClick={ this.goDetail.bind(this, fid)}>
              <img src = {dat[i].banner} alt=""/>
            </div>
            <h2>晚餐●2018年12月28日</h2>
            <p  key={dat[i].f_id} className="allupdate-name">{dat[i].content.c1}</p>
            <p className="allupdate-red"><span>21小时前</span><span><i className="iconfont icon-chakan"></i>{dat[i].number}</span><span><i className="iconfont icon-xinxi"></i>79</span></p>
            <p className="allupdate-user" onClick={ this.goUsers.bind(this,uname)}><img src="http://i2.chuimg.com/0a6271d0e40b4b3580e2bf1b6c0fae56_160w_160h.jpg?imageView2/1/w/160/h/160/interlace/1/q/90" alt="" />
            <span>{dat[i].u_name}</span><span className="iconfont icon-chushimao2"></span></p>
            
           
          </li>
        )
      }
    }
    
    return (
      <div className="works-update">
        <div className="works-allupdate">
          <div className="allupdate-container">
            <ul className="allupdate-container-list">
            {/* <li>
                <div className="allupdate-containerImg"><img src="http://i1.chuimg.com/a1d3371fab2f4f0ba07d6b5f2e941547_1280w_960h.jpg@2o_50sh_1pr_1l_280w_280h_1c_1e_90q_1wh" alt="" /></div>
                <h2>晚餐●2018年12月28日</h2>
                <p className="allupdate-name">最简单的做法 葱姜料酒和酱油炒一下 #晚餐●2018年12月28日#</p>
                <p className="allupdate-red"><span>21小时前</span><span><i className="iconfont icon-chakan"></i>1189</span><span><i className="iconfont icon-xinxi"></i>79</span></p>
                <p className="allupdate-user"><a href=""><img src="http://i2.chuimg.com/0a6271d0e40b4b3580e2bf1b6c0fae56_160w_160h.jpg?imageView2/1/w/160/h/160/interlace/1/q/90" alt="" /></a>
                <span>下山虎虎</span><span className="iconfont icon-chushimao2"></span></p>
              </li> */}
              {
                pop
              }
            </ul>
          </div>

        </div>
      </div>  
    )
  }
}

export default Com;
